<template>
  <view class="resource-list-container">
    <v-statusbar class="status-bar"></v-statusbar>

    <!-- 页面头部 -->
    <view class="header">
      <view class="header-left">
        <view class="back-btn" @click="navigateBack">
          <uni-icons type="left" size="24"></uni-icons>
        </view>
        <view class="page-title">外部资源推荐</view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="content">
      <!-- 搜索框 - 优化样式 -->
      <view class="search-container">
        <view class="search-box">
          <uni-icons type="search" size="20" color="#999" class="search-icon"></uni-icons>
          <input type="text" placeholder="搜索学习资源..." v-model="searchKeyword" @confirm="searchResources"
            class="search-input" />
          <view v-if="searchKeyword" class="clear-btn" @click="clearSearch">
            <uni-icons type="clear" size="18" color="#999"></uni-icons>
          </view>
        </view>
        <button class="search-button" @click="searchResources" :disabled="isSearching">
          {{ isSearching ? '搜索中...' : '搜索' }}
        </button>
      </view>

      <!-- 资源列表 -->
      <view class="resource-list" v-if="!isSearching">
        <!-- 猜你喜欢小标题 -->
        <view class="list-title" v-if="!hasSearched && resources.length > 0">
          <text>猜你喜欢</text>
        </view>

        <!-- 搜索结果标题 -->
        <view class="list-title" v-if="hasSearched && resources.length > 0">
          <text>搜索结果</text>
        </view>

        <view v-for="(resource, index) in resources" :key="resource.id" class="resource-item"
          @click="openResourceDetail(resource)">
          <!-- 名称加颜色背景 -->
          <view class="resource-avatar" :style="{ backgroundColor: getResourceColor(resource) }">
            <text>{{ getResourceInitial(resource) }}</text>
          </view>
          <view class="resource-info">
            <text class="resource-title">{{ resource.title }}</text>
            <view class="resource-description">{{ resource.description }}</view>
          </view>
        </view>

        <!-- 已经到底了提示 -->
        <view v-if="resources.length > 0" class="bottom-tip">
          <text>- - - 已经到底了 - - -</text>
        </view>
      </view>

      <!-- 搜索中提示 -->
      <view class="searching-state" v-if="isSearching">
        <text>正在搜索相关学习资源...</text>
      </view>

      <!-- 无数据提示 -->
      <view class="empty-state" v-if="resources.length === 0 && !isSearching && hasSearched">
        <text>当前搜索资源，不存在请提供您想学习的具体课程或领域，以便我为您推荐合适的课程。</text>
      </view>
    </view>
  </view>
</template>

<script>
import mixins from '@/mixins'
export default {
  mixins: [mixins],
  name: 'resource-list',
  data() {
    return {
      searchKeyword: '',
      resources: [
        {
          title: "大学语文",
          description: "“大学语文”是南开大学大学生文化素质教育、人文素质教育的核心课程与特色课程。早在1980年代即向全校非中文专业学生开设，成为全国最早恢复大学语文教学的高校之一。新世纪以来，以母语教育为核心、以语言素养为目标，南开大学“大学语文”以文学院及语文教育研究中心为依托，以国家级教学名师陈洪教授为带头人，组建了一支有十多位教授和博士加入的教学团队，多年来兢兢业业，工作成效显著。南开大学“大学语文”2007年获国家级精品课程，2008年获国家级教学团队，2009年获国家级教学成果一等奖，系列教材已出至第三版，并入选十一五、十二五国家级规划教材。",
          url: "https://www.icourse163.org/course/NKU-350004?from=searchPage&outVendor=zw_mooc_pcssjg_"
        },
        {
          title: "《改变心理学的四十项研究》",
          description: "介绍了改变心理学的四十项重要研究，帮助学习者了解心理学研究的经典案例和方法。",
          url: "https://www.bilibili.com/video/BV157411q7Ma/"
        },
        {
          title: "W3Ccss学习",
          description: "CSS指层叠样式表（CascadingStyleSheets）。在我们的CSS教程中，您将学习如何使用CSS同时控制整个站点的样式和布局。通过与XHTML结合，CSS可以帮助我们实行表现与结构分离的开发模式。通过使用CSS来提升工作效率！",
          url: "https://www.w3cschool.cn/css/"
        },
        {
          title: "职场英语",
          description: "“职场英语”是一门为非英语专业学生开设的专门用途英语选修课程，也可作为英语专业跨文化类通识选修课程。同时，有志投身于英语职场、提高自身职场英语交际能力的社会学习者亦可选择学习该课程。",
          url: "https://www.icourse163.org/course/SWJTU-1002351002?from=searchPage&outVendor=zw_mooc_pcssjg_"
        }
      ],
      isSearching: false,
      hasSearched: false,
      // 定义一组颜色，用于生成背景色
      avatarColors: [
        '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FECA57',
        '#FF9FF3', '#54A0FF', '#5F27CD', '#00D2D3', '#FF9F43',
        '#54A0FF', '#FF7675', '#1DD1A1', '#5F27CD', '#00CECE'
      ]
    }
  },
  methods: {
    // 返回上一页
    navigateBack() {
      this.toPage(-1)
    },

    // 清除搜索
    clearSearch() {
      this.searchKeyword = ''
      this.hasSearched = false
      // 恢复初始推荐内容
      this.resources = [
        {
          title: "大学语文",
          description: "“大学语文”是南开大学大学生文化素质教育、人文素质教育的核心课程与特色课程。早在1980年代即向全校非中文专业学生开设，成为全国最早恢复大学语文教学的高校之一。新世纪以来，以母语教育为核心、以语言素养为目标，南开大学“大学语文”以文学院及语文教育研究中心为依托，以国家级教学名师陈洪教授为带头人，组建了一支有十多位教授和博士加入的教学团队，多年来兢兢业业，工作成效显著。南开大学“大学语文”2007年获国家级精品课程，2008年获国家级教学团队，2009年获国家级教学成果一等奖，系列教材已出至第三版，并入选十一五、十二五国家级规划教材。",
          url: "https://www.icourse163.org/course/NKU-350004?from=searchPage&outVendor=zw_mooc_pcssjg_"
        },
        {
          title: "《改变心理学的四十项研究》",
          description: "介绍了改变心理学的四十项重要研究，帮助学习者了解心理学研究的经典案例和方法。",
          url: "https://www.bilibili.com/video/BV157411q7Ma/"
        },
        {
          title: "W3Ccss学习",
          description: "CSS指层叠样式表（CascadingStyleSheets）。在我们的CSS教程中，您将学习如何使用CSS同时控制整个站点的样式和布局。通过与XHTML结合，CSS可以帮助我们实行表现与结构分离的开发模式。通过使用CSS来提升工作效率！",
          url: "https://www.w3cschool.cn/css/"
        },
        {
          title: "职场英语",
          description: "“职场英语”是一门为非英语专业学生开设的专门用途英语选修课程，也可作为英语专业跨文化类通识选修课程。同时，有志投身于英语职场、提高自身职场英语交际能力的社会学习者亦可选择学习该课程。",
          url: "https://www.icourse163.org/course/SWJTU-1002351002?from=searchPage&outVendor=zw_mooc_pcssjg_"
        }
      ]
    },

    // 搜索资源
    async searchResources() {
      if (!this.searchKeyword.trim()) {
        this.showMessage.info('请输入搜索关键词')
        return
      }

      this.isSearching = true
      try {
        // 调用AI接口获取学习资源
        const results = await this.callAIResourceSearch(this.searchKeyword.trim())

        // 处理返回的结果
        this.resources = results.map((item, index) => ({
          id: index + 1,
          title: item.title || '学习资源',
          description: item.description || '暂无描述',
          url: item.url || '#',
        }))

        this.hasSearched = true
      } catch (error) {
        console.error('搜索资源失败:', error)
        this.showMessage.error('搜索资源失败，请稍后重试')
      } finally {
        this.isSearching = false
      }
    },

    // 调用AI接口搜索资源
    async callAIResourceSearch(keyword) {
      try {
        // 调用实际API
        const res = await this.$axios.post('/ai/xft/outer/resources', {
          "query": keyword
        })

        // 检查响应是否成功
        if (res) {
          // 处理返回的数据格式
          return res.map(item => ({
            title: item.title,
            description: item.content, // 注意这里接口返回的是content字段
            url: item.url.trim()
          }))
        } else {
          throw new Error(res?.msg || '获取资源失败')
        }
      } catch (error) {
        console.error('调用AI接口失败:', error)
        throw error
      }
    },

    // 打开资源详情 - 跳转到资源详情页面
    openResourceDetail(resource) {
      if (resource.url && resource.url !== '#') {
        // 使用encodeURIComponent编码URL参数，避免特殊字符导致的问题
        const encodedUrl = encodeURIComponent(resource.url);
        uni.navigateTo({
          url: `/pages/AI/outWeb?url=${encodedUrl}`,
          success: () => {
            console.log('跳转资源详情页成功')
          },
          fail: (error) => {
            console.error('跳转资源详情页失败:', error)
            this.showMessage.error('无法打开资源详情，请稍后重试')
          }
        })
      }
    },

    // 根据资源名称生成背景色
    getResourceColor(resource) {
      // 使用资源标题的哈希值选择颜色
      let hash = 0
      const title = resource.title || '资源'
      for (let i = 0; i < title.length; i++) {
        hash = title.charCodeAt(i) + ((hash << 5) - hash)
        hash = hash & hash // 转换为32位整数
      }

      // 根据哈希值选择颜色
      const colorIndex = Math.abs(hash) % this.avatarColors.length
      return this.avatarColors[colorIndex]
    },

    // 获取资源名称的首字符
    getResourceInitial(resource) {
      const title = resource.title || '资源'
      // 先过滤掉所有不需要的特殊符号
      let cleanTitle = title.replace(/[【】「」《》()（）【】\[\]\{\}]/g, '')

      // 如果是中文，取前两个字符
      if (/[一-龥]/.test(cleanTitle.charAt(0))) {
        let chineseChars = ''
        for (let i = 0; i < cleanTitle.length && chineseChars.length < 2; i++) {
          const char = cleanTitle.charAt(i)
          if (/[一-龥]/.test(char)) {
            chineseChars += char
          }
        }
        return chineseChars || '资源'
      }
      // 否则取第一个英文单词（不包括标点符号）
      const match = cleanTitle.match(/[a-zA-Z]+/)
      return match ? match[0] : cleanTitle.charAt(0) || 'R'
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../basis.scss";
@import "./index.scss";

// 重置页面默认样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.resource-list-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  height: 100rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  z-index: 10;
  position: sticky;
  top: 0;

  .header-left {
    display: flex;
    align-items: center;
    flex: 1;

    .back-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;
    }

    .page-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
}

.content {
  padding: 20rpx;
}

// 搜索框样式 - 优化
.search-container {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;
  align-items: center;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 40rpx; // 增加圆角
  padding: 0 30rpx; // 增加内边距
  height: 88rpx; // 略微增加高度
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); // 优化阴影
  transition: all 0.3s ease; // 添加过渡效果
}

.search-icon {
  margin-right: 16rpx; // 增加图标与输入框的间距
}

.search-input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
  color: #333;
  background: transparent;
  border: none;
  outline: none;
}

.clear-btn {
  width: 44rpx;
  height: 44rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #f0f0f0;
  transition: all 0.2s ease;

  &:active {
    background-color: #e0e0e0;
  }
}

.search-button {
  width: 160rpx;
  height: 88rpx;
  background-color: $primary;
  color: #fff;
  border-radius: 44rpx; // 增加圆角
  font-size: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 16rpx rgba(71, 107, 255, 0.4); // 优化阴影
  transition: all 0.3s ease;
  border: none;

  &:active {
    transform: scale(0.96);
  }
}

// 资源列表样式
.resource-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

// 列表标题样式
.list-title {
  margin: 20rpx 0;
  padding-left: 10rpx;
  border-left: 8rpx solid $primary;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.resource-item {
  display: flex;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 4rpx 20rpx rgba(71, 107, 255, 0.15);
  }
}

// 资源头像样式（名称加颜色背景）
.resource-avatar {
  width: 180rpx;
  height: 120rpx;
  border-radius: 12rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
  flex-shrink: 0;

  text {
    color: #fff;
    font-size: 40rpx;
    font-weight: bold;
    text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
  }
}

.resource-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 120rpx;
}

// 标题添加下划线
.resource-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #565656;
  margin-bottom: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;

  /* 保留下划线样式，确保链接看起来像可点击的 */
  text-decoration: underline;
  text-decoration-color: #476BFF;
  text-decoration-thickness: 2rpx;
  text-underline-offset: 6rpx;
}

.resource-description {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 10rpx;
}

.bottom-tip {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx 0;

  text {
    font-size: 26rpx;
    color: #999;
  }
}

.searching-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 140rpx 60rpx; // 与其他状态保持一致的内边距
  background-color: #fff;
  border-radius: 24rpx;
  margin: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  text-align: center;

  text {
    font-size: 30rpx; // 增大字体尺寸
    color: #666; // 调整文本颜色
    line-height: 1.6; // 增加行高
    animation: slideUp 0.5s ease 0.3s both; // 添加滑入动画
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 140rpx 60rpx; // 增加内边距，让状态更突出
  background-color: #fff;
  border-radius: 24rpx;
  margin: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  text-align: center;

  .state-icon {
    font-size: 80rpx;
    color: #FF6B6B;
    margin-bottom: 30rpx;
    animation: fadeIn 0.8s ease;
  }

  text {
    font-size: 30rpx;
    color: #666;
    line-height: 1.6;
    animation: slideUp 0.5s ease 0.3s both;
  }
}
</style>